<template>
  <div class="error">
    <div class='error-text'>
      <div class="error-code">404</div>
      <div class="error-title">页面不存在</div>
      <el-button @click="$router.go(-1)" type="primary">{{ notFoundData.seconds }} 秒后返回上一页</el-button>
    </div>
  </div>
</template>

<script setup>
import {onMounted, onUnmounted, reactive} from "vue";
import {useRouter} from "vue-router";
import '@/views/notFound/notFound.css';

const $router = useRouter();

let notFoundData = reactive({
  seconds: 5,
  timer: null
})

onMounted(() => {
  notFoundData.timer = setInterval(() => {
    if (notFoundData.seconds === 0) {
      clearInterval(notFoundData.timer);
      $router.go(-1);
      return
    }
    notFoundData.seconds -= 1;
  }, 1000)
})

onUnmounted(() => {
  notFoundData.timer && clearInterval(notFoundData.timer);
})

</script>


<style scoped>

</style>
